<template>
	<div class="index">

	 
		<div class="search flex side_center">
			<i class="iconfont iconsearch icon-wxbdingwei"></i>
			<input v-model="key" class="search_ipt" type="" name="" placeholder="请输入搜索内容">
			<i class="iconfont iconsearch icon-search1" @click="toSearch"></i>
		</div>

		<my-banner></my-banner>

		<ul class="part">
			<!-- <li class="activity" @click="toActive">
				<div><i class="iconfont iconpart icon-huodong"></i></div>
				<p>活动</p>
			</li>
			<li class="order" @click="toOrder">
				<div><i class="iconfont iconpart icon-dingdan"></i></div>
				<p>订单</p>
			</li> -->
			<!-- <li class="card" @click="toCard">
				<div><i class="iconfont iconpart icon-handle-card"></i></div>
				<p>办卡</p>
			</li>
			<li class="recharge" @click="toRecharge">
				<div><i class="iconfont iconpart icon-chongzhi"></i></div>
				<p>充值</p>
			</li> -->
		</ul>

    <!-- <button style="width: 100%;height: 3rem;font-size: 1.3rem;" @click="test">测试</button> -->

		<div class="main">
			<ul class="tabTit">
				<li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)">{{item}}</li>
			</ul>
			<div class="tabCon">
				<div v-for="(itemCon,index) in tabContent0" v-show="0 == num">
					<div class="list flex start_end" @click="toPartner">
					  <div class="list_l">
					    <img class="list_l_img" v-bind:src="itemCon.imgs" alt="">
					    <div class="list_l_star">
					    	<i v-bind:class="[itemCon.score>0?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>1?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>2?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>3?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>4?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    </div>
					  </div>
					  <div class="list_m">
					    <div class="list_m_top flex first_center">
					      <div class="list_m_name">{{itemCon.name}}</div>
					      <div class="list_m_score">{{itemCon.score}}分</div>
					    </div>
					    <div class="list_m_state">未完成订单数量：{{itemCon.unfinished_num}}</div>
					    <div class="flex first_center">
					      <div class="list_m_serve">服务:{{itemCon.service_num}}次</div>
					      <div class="list_m_review">点评:{{itemCon.review_num}}</div>
					    </div>
					  </div>
					  <div class="list_r">
					    <p class="list_r_long">距离:{{itemCon.distance}}km</p>
					    <button class="list_r_btn" @click.stop="toConfirm(itemCon.uid,itemCon.name,itemCon.mobile,itemCon.uid)">预约</button>
					  </div>
					</div>
				</div>
				<div v-for="(itemCon,index) in tabContent1" v-show="1 == num">
					<div class="list flex start_end" @click="toPartner">
					  <div class="list_l">
					    <img class="list_l_img" v-bind:src="itemCon.imgs" alt="">
					    <div class="list_l_star">
					    	<i v-bind:class="[itemCon.score>0?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>1?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>2?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>3?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>4?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    </div>
					  </div>
					  <div class="list_m">
					    <div class="list_m_top flex first_center">
					      <div class="list_m_name">{{itemCon.name}}</div>
					      <div class="list_m_score">{{itemCon.score}}分</div>
					    </div>
					    <div class="list_m_state">未完成订单数量：{{itemCon.unfinished_num}}</div>
					    <div class="flex first_center">
					      <div class="list_m_serve">服务:{{itemCon.service_num}}次</div>
					      <div class="list_m_review">点评:{{itemCon.review_num}}</div>
					    </div>
					  </div>
					  <div class="list_r">
					    <p class="list_r_long">距离:{{itemCon.distance}}km</p>
					    <button class="list_r_btn" @click.stop="toConfirm(itemCon.uid,itemCon.name,itemCon.mobile,itemCon.uid)">预约</button>
					  </div>
					</div>
				</div>
				<div v-for="(itemCon,index) in tabContent2" v-show="2 == num">
					<div class="list flex start_end" @click="toPartner">
					  <div class="list_l">
					    <img class="list_l_img" v-bind:src="itemCon.imgs" alt="">
					    <div class="list_l_star">
					    	<i v-bind:class="[itemCon.score>0?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>1?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>2?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>3?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    	<i v-bind:class="[itemCon.score>4?'iconfont star icon-star':'iconfont star icon-star5']"></i>
					    </div>
					  </div>
					  <div class="list_m">
					    <div class="list_m_top flex first_center">
					      <div class="list_m_name">{{itemCon.name}}</div>
					      <div class="list_m_score">{{itemCon.score}}分</div>
					    </div>
					    <div class="list_m_state">未完成订单数量：{{itemCon.unfinished_num}}</div>
					    <div class="flex first_center">
					      <div class="list_m_serve">服务:{{itemCon.service_num}}次</div>
					      <div class="list_m_review">点评:{{itemCon.review_num}}</div>
					    </div>
					  </div>
					  <div class="list_r">
					    <p class="list_r_long">距离:{{itemCon.distance}}km</p>
					    <button class="list_r_btn" @click.stop="toConfirm(itemCon.uid,itemCon.name,itemCon.mobile,itemCon.uid)">预约</button>
					  </div>
					</div>
				</div>
			</div>
		</div>

    <!-- 底部导航 -->
    <div class="tab">
      <ul class="tab_main flex">
        <li class="tab_li active" @click="toIndex">
          <div>
            <i class="iconfont icontab icon-home2"></i>
          </div>
          <p>首页</p>
        </li>
        <li class="tab_li" @click="toUser">
          <div>
            <i class="iconfont icontab icon-wode2"></i>
          </div>
          <p>我的</p>
        </li>
      </ul>
    </div>
	</div>
</template>


<script>
// import 'swiper/dist/css/swiper.css'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
// import App from '../../../App'
export default {
  inject: ['reload'],
	data(){
		return {
      uuid: '',
			num: 0,
			tabs: ["按距离", "按评分","服务过"],
			tabContent0:[],
			tabContent1:[],
			tabContent2:[],
      carLength: '',
      addrLength: '',
			key: '',
		}
	},
	beforeMount(){
    // this.getInfoRange();
    // this.getInfoScore();
    // this.getInfoServed();
    this.getInfo();
    // this.getLength();
	},
  mounted() {

  },
	methods: {
		tab(index) {
				this.num = index;
		},
		toSearch() {
			var that = this;
			this.$router.push({
				name:'Search',
        params: {
          key: that.key,
        }
			})
		},
		toActive() {
			this.$router.push({path:'/active'})
		},
		toOrder(){
			this.$router.push({path:'/order'})
		},
		toCard(){
			this.$router.push({path:'/card'})
		},
		toRecharge(){
			this.$router.push({path:'/recharge'})
		},
    // 查看小伙伴详情
		toPartner(){
			this.$router.push({path:'/partner'})
		},
    toIndex(){
      this.$router.push({path:'/'})
    },
    toUser(){
      this.$router.push({path:'/user'})
    },
    // 预约
    toConfirm(id,name,phone,uid){
      console.log("预约 —— 车辆获取");
      var that = this;
      if (that.carLength == 0 || that.addrLength == 0) {
        alert("请先填写您的车辆及地址信息！");
      } else {
        axios.get(global.api.index.appoint,{
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            uid: uid,
          }
        })
        .then(function(res){
          console.log("toConfirm then");
          console.log(res.data);
          if (res.data.data.code == 'success') {
            global.order.worker.id = id;
            global.order.worker.name = name;
            global.order.worker.phone = phone;
            global.order.first = true;

            location.href='https://ecar.jslcwy.com/index.html#/Confirm?workerId='+id;
            // that.$router.push({path:'/Confirm'})                  
          } else {
            alert(res.data.data.msg);
          }
        })
        .catch(function(res){
          console.log("toConfirm catch");
          console.log(res);
        })
      }
    },
    // 接口
    getInfo(soft){
      var that = this;
      axios.all([
        axios.get(global.api.index.search,{  //按距离
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            soft: 0,
          }
        }),
        axios.get(global.api.index.search,{  //按评分
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            soft: 1,
          }
        }),
        axios.get(global.api.index.search,{  //按服务过
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            soft: 2,
          }
        }),
        axios.get(global.api.carMine.car,{  //车子数量
          params: {
            uuid: localStorage.getItem('carWashUuid'),
          }
        }),
        axios.get(global.api.address.myAddress,{  //地址数量
          params: {
            uuid: localStorage.getItem('carWashUuid'),
          }
        }),
      ])
      .then(axios.spread(function(tabContent0,tabContent1,tabContent2,car,addr){
        console.log("getInfo then");
        console.log(tabContent0.data.data);
        console.log(tabContent1.data.data);
        console.log(tabContent2.data.data);
        console.log(car.data.data.length);
        console.log(addr.data.data.length);
        that.tabContent0 = tabContent0.data.data;
        that.tabContent1 = tabContent1.data.data;
        that.tabContent2 = tabContent2.data.data;
        that.carLength = car.data.data.length;
        that.addrLength = addr.data.data.length;
      }))
      .catch(function(res){
        console.log(res);
      })
    },
  },
	// components: {
	// 	swiper,
	// 	swiperSlide
	// }
}
</script>

<style scoped>
	/* 搜索 */
	.search{
		height: 2rem;
	}
	.search_ipt{
		-webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 2rem;
    /*line-height: 2rem;*/
    border: none;
    font-size: 0.85rem;
	}
	.search_ipt:focus{
		outline-offset: 0px;
		outline: -webkit-focus-ring-color auto 0px;
	}
	.iconsearch{
		width: 2rem;
		height: 2rem;
		line-height: 2rem;
		font-size: 1.4rem;
	}
	.banner { 
		/*margin: 0;
		padding: 0;*/
	}
	.banner img {
		width: 100%;
	}
	/* 活动... */
	.part {
		display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: 0.1rem;
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
	}
	.part li {
		-webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
	}
	.part li div{
		width: 2rem;
		height: 2rem;
		margin: 0 auto;
		border-radius: 50%;
	}
	.activity div{
		background-color: #FF2976;
	}
	.order div{
		background-color: #2ecc80;
	}
	.card div{
		background-color: #6A54ED;
	}
	.recharge div{
		background-color: #2ECC80;
	}
	.iconpart{
		font-size: 1.5rem;
		/*background-color: #FF2976;*/
		border-radius: 50%;
		color: #ffffff;
		line-height: 2rem;
	}
	.part li p{
		padding: 0.4rem 0;
		font-size: 0.9rem;
		/*font-weight: bold;*/
		color: #000000;
	}
	/* tab小伙伴 */
	.tabTit{
		display: -webkit-box;
    display: -webkit-flex;
    display: flex;
		border-bottom: 1px solid #B3B3B4;
	}
	.tabTit li {
		-webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
		height: 2rem;
		line-height: 2rem;
		color: #595757;
	}
	.tabTit li:nth-child(2){
		border-left: 1px solid #B3B3B4;
		border-right: 1px solid #B3B3B4;
	}
	.tabTit .active{
		background-color: #2ecc80;
		color: #fff;
	}
	.tabCon{
		margin-bottom: 5rem;
	}
	.list{
		padding: 0.5rem;
		border-bottom: 1px solid #B3B3B4;
	}
	.list_l{
		width: 23%;
	}
	.list_l_img{
		width: 55%;
		border-radius: 50%;
	}
	.list_l_star{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
	}
	.star{
		color: #2ecc80;
		font-size: 0.8rem;
	}
	.list_m{
		width: 52%;
	}
	.list_m_top{
		font-weight: bold;
	}
	.list_m_name{
		margin-right: 1rem;
	}
	.list_m_score{

	}
	.list_m_state{
		text-align: left;
		font-size: 0.9rem;
		padding: 0.3rem 0;
		color: #595757;
	}
	.list_m_serve{
		font-size: 0.8rem;
		color: #888888;
		margin-right: 0.5rem;
	}
	.list_m_review{
		font-size: 0.8rem;
		color: #888888;
	}
	.list_r{
		width: 25%;
	}
	.list_r_long{
		font-size: 0.85rem;
		color: #595757;
		margin-bottom: 0.4rem;
	}
	.list_r_btn{
		margin: 0;
		padding: 0;
		width: 4rem;
		height: 2.5rem;
		background-color: #2ecc80;
		color: #ffffff;
		font-size: 0.9rem;
		border-radius: 0.5rem;
		border: none;
	}
	.list_r_btn:focus{
		outline-offset: 0px;
		outline: -webkit-focus-ring-color auto 0px;
	}
  /*底部导航*/
  .tab{
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
  }
  .tab_main{
    border-top: 1px solid #797979;
    box-sizing: border-box;
    padding: 0.25rem 0 0;
    /*height: 5rem;*/
  }
  .tab_main .active{
    color: #2ECC80;
  }
  .tab_li{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #B5B5B5;
  }
  .tab_li p{
    font-size: 0.9rem;
  }
  .icontab{
    font-size: 1.5rem;
  }
</style>
<style>
	ul,li,div,a,p,span{
		margin: 0;
		padding: 0;
	}
	li{
		list-style: none;
	}
	.flex{
		display: -webkit-box;
    display: -webkit-flex;
    display: flex;
	}
	.side_center{
		justify-content: space-between;
		align-items: center
	}
	.start_center{
		justify-content: flex-start;
		align-items:center;
	}
	.start_end{
		justify-content: flex-start;
		align-items: flex-end;
	}
</style>
